<!-- usually-tools -->
<template>
  <div class="usually-tools">
    <div class="tool">
      <span>常用工具 :</span>
      <ul class="tools">
        <li v-for="item in 10" :key="item">
          <router-link :to="`/tool-library/${item}`">
            工具{{ item }}
          </router-link>
        </li>
      </ul>
    </div>
    <div class="more-tools">
      <router-link to="/tool">查看更多</router-link>
    </div>
  </div>
</template>
<style scoped lang="less">
.usually-tools {
  position: relative;
  display: flex;
  align-items: center;
  width: 80%;
  height: 55px;
  margin: 25px auto;
  padding: 10px 6px;
  background-color: #18181c;
  color: #d5d5d6;
  border-radius: 10px;
  .tool {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 18px;
    line-height: 30px;
    span {
      margin-right: 5px;
    }
    .tools {
      display: flex;
      align-items: center;
      width: 70%;
      overflow: hidden;
      white-space: nowrap;
      li {
        margin: 0 5px;

        a {
          color: #63e2b7;
        }
      }
    }
  }
  .more-tools {
    position: absolute;
    right: 10px;
    font-size: 15px;
  }
}
</style>
